<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WIFI助手 - IP查询</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #202124;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* iPhone 样式外壳 */
        .phone-container {
            position: relative;
            width: 375px;
            height: 812px;
            background-color: #111;
            border-radius: 40px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 10px;
        }
        
        /* 顶部刘海 */
        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 30px;
            background-color: #111;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            z-index: 10;
        }
        
        /* 底部指示条 */
        .home-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 5px;
            background-color: #f0f0f0;
            border-radius: 3px;
            z-index: 10;
        }
        
        /* 音量按钮 */
        .volume-button {
            position: absolute;
            left: -2px;
            top: 120px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        .volume-button:before {
            content: '';
            position: absolute;
            left: 0;
            top: -40px;
            width: 4px;
            height: 30px;
            background-color: #2a2a2a;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        
        /* 电源按钮 */
        .power-button {
            position: absolute;
            right: -2px;
            top: 120px;
            width: 4px;
            height: 60px;
            background-color: #2a2a2a;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }
        
        /* 屏幕 */
        .screen {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #EDEDED; /* 微信背景色 */
            border-radius: 32px;
            overflow: hidden;
            z-index: 1;
        }
        
        /* App顶部状态栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;
            height: 30px;
            background-color: #EDEDED;
        }
        
        .status-bar .time {
            font-weight: 600;
            font-size: 14px;
        }
        
        .status-bar .icons {
            display: flex;
            gap: 5px;
        }
        
        .status-bar .icons .icon {
            font-size: 14px;
        }
        
        /* App内容区域 */
        .app-content {
            position: relative;
            height: calc(100% - 30px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding-bottom: 60px; /* 为底部导航腾出空间 */
        }
        
        /* IP查询卡片 */
        .ip-query-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .ip-query-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 15px;
        }
        
        .ip-input-group {
            position: relative;
            margin-bottom: 15px;
        }
        
        .ip-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #E6E6E6;
            border-radius: 8px;
            font-size: 15px;
            color: #333333;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .ip-input:focus {
            border-color: #07C160;
        }
        
        .ip-submit {
            width: 100%;
            padding: 12px 0;
            background-color: #07C160;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .ip-submit:active {
            background-color: #06a252;
        }
        
        .current-ip-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #F2F2F2;
        }
        
        .current-ip-title {
            font-size: 15px;
            color: #888888;
            margin-bottom: 10px;
        }
        
        .current-ip-value {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            padding: 10px;
            background-color: #F7F7F7;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
        }
        
        /* IP查询结果卡片 */
        .ip-result-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: none; /* 默认隐藏，查询后显示 */
        }
        
        .ip-result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .ip-result-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
        }
        
        .ip-result-address {
            font-size: 15px;
            color: #07C160;
        }
        
        .ip-result-map {
            width: 100%;
            height: 180px;
            background-color: #F7F7F7;
            border-radius: 8px;
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .ip-result-map img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .ip-result-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .detail-item {
            display: flex;
            flex-direction: column;
            padding: 12px;
            background-color: #F7F7F7;
            border-radius: 10px;
        }
        
        .detail-label {
            font-size: 13px;
            color: #888888;
            margin-bottom: 5px;
        }
        
        .detail-value {
            font-size: 15px;
            font-weight: 500;
            color: #333333;
            word-break: break-all;
        }
        
        /* 查询历史卡片 */
        .history-card {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .history-title {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .history-count {
            font-size: 13px;
            color: #888888;
        }
        
        .query-history {
            list-style: none;
        }
        
        .history-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #F2F2F2;
            cursor: pointer;
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-item:active {
            background-color: #F7F7F7;
        }
        
        .history-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(7,193,96,0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
        }
        
        .history-icon i {
            color: #07C160;
            font-size: 20px;
        }
        
        .history-details {
            flex: 1;
        }
        
        .history-ip {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            margin-bottom: 3px;
        }
        
        .history-location {
            font-size: 13px;
            color: #888888;
        }
        
        .history-time {
            font-size: 12px;
            color: #888888;
        }
        
        /* 加载中动画 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(7,193,96,0.1);
            border-top: 4px solid #07C160;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 底部导航栏 */
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: #F7F7F7;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #E6E6E6;
            z-index: 10;
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            cursor: pointer;
        }
        
        .nav-icon {
            color: #888888;
            margin-bottom: 4px;
        }
        
        .nav-label {
            font-size: 12px;
            color: #888888;
        }
        
        .nav-active .nav-icon, 
        .nav-active .nav-label {
            color: #07C160; /* 微信绿 */
        }
        
        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            z-index: 1000;
            font-size: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- iPhone外壳元素 -->
        <div class="notch"></div>
        <div class="home-indicator"></div>
        <div class="volume-button"></div>
        <div class="power-button"></div>
        
        <!-- 屏幕内容 -->
        <div class="screen">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <div class="time">20:08</div>
                <div class="icons">
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">signal_cellular_alt</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">wifi</i></div>
                    <div class="icon"><i class="material-icons" style="font-size: 14px;">battery_full</i></div>
                </div>
            </div>
            
            <!-- App内容区域 -->
            <div class="app-content">
                <!-- IP查询卡片 -->
                <div class="ip-query-card">
                    <div class="ip-query-title">IP归属地查询</div>
                    
                    <div class="ip-input-group">
                        <input type="text" class="ip-input" id="ipInput" placeholder="请输入要查询的IP地址" value="">
                    </div>
                    
                    <button class="ip-submit" id="queryBtn">查询</button>
                    
                    <div class="current-ip-section">
                        <div class="current-ip-title">当前连接的IP地址：</div>
                        <div class="current-ip-value" id="currentIp">192.168.1.5</div>
                    </div>
                </div>
                
                <!-- IP查询结果卡片 -->
                <div class="ip-result-card" id="resultCard">
                    <div class="ip-result-header">
                        <div class="ip-result-title">查询结果</div>
                        <div class="ip-result-address" id="resultIp">8.8.8.8</div>
                    </div>
                    
                    <div class="ip-result-map">
                        <img src="https://api.map.baidu.com/staticimage?center=116.404,39.915&width=400&height=200&zoom=12&markers=116.404,39.915" id="locationMap" alt="位置示意图">
                    </div>
                    
                    <div class="ip-result-details">
                        <div class="detail-item">
                            <div class="detail-label">国家/地区</div>
                            <div class="detail-value" id="resultCountry">中国</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">省份</div>
                            <div class="detail-value" id="resultProvince">北京市</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">城市</div>
                            <div class="detail-value" id="resultCity">北京市</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">运营商</div>
                            <div class="detail-value" id="resultIsp">中国移动</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">经度</div>
                            <div class="detail-value" id="resultLong">116.4074</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">纬度</div>
                            <div class="detail-value" id="resultLat">39.9042</div>
                        </div>
                    </div>
                </div>
                
                <!-- 查询历史卡片 -->
                <div class="history-card">
                    <div class="history-title">
                        <span>查询历史</span>
                        <span class="history-count">4条记录</span>
                    </div>
                    
                    <ul class="query-history" id="queryHistory">
                        <li class="history-item" data-ip="8.8.8.8">
                            <div class="history-icon">
                                <i class="material-icons">public</i>
                            </div>
                            <div class="history-details">
                                <div class="history-ip">8.8.8.8</div>
                                <div class="history-location">美国 加利福尼亚州 山景城</div>
                            </div>
                            <div class="history-time">今天 18:30</div>
                        </li>
                        
                        <li class="history-item" data-ip="114.114.114.114">
                            <div class="history-icon">
                                <i class="material-icons">public</i>
                            </div>
                            <div class="history-details">
                                <div class="history-ip">114.114.114.114</div>
                                <div class="history-location">中国 江苏省 南京市</div>
                            </div>
                            <div class="history-time">今天 15:45</div>
                        </li>
                        
                        <li class="history-item" data-ip="1.1.1.1">
                            <div class="history-icon">
                                <i class="material-icons">public</i>
                            </div>
                            <div class="history-details">
                                <div class="history-ip">1.1.1.1</div>
                                <div class="history-location">澳大利亚 墨尔本</div>
                            </div>
                            <div class="history-time">昨天 14:20</div>
                        </li>
                        
                        <li class="history-item" data-ip="223.5.5.5">
                            <div class="history-icon">
                                <i class="material-icons">public</i>
                            </div>
                            <div class="history-details">
                                <div class="history-ip">223.5.5.5</div>
                                <div class="history-location">中国 浙江省 杭州市</div>
                            </div>
                            <div class="history-time">昨天 10:15</div>
                        </li>
                    </ul>
                </div>
                
                <!-- 加载中动画 -->
                <div class="loading-overlay" id="loadingOverlay">
                    <div class="loading-spinner"></div>
                </div>
            </div>
            
            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="material-icons nav-icon">wifi</i>
                    <div class="nav-label">首页</div>
                </div>
                <div class="nav-item">
                    <i class="material-icons nav-icon">speed</i>
                    <div class="nav-label">测速</div>
                </div>
                <div class="nav-item nav-active">
                    <i class="material-icons nav-icon">location_on</i>
                    <div class="nav-label">IP查询</div>
                </div>
            </div>
            
            <!-- 提示信息 -->
            <div class="toast" id="toast"></div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const ipInput = document.getElementById('ipInput');
        const queryBtn = document.getElementById('queryBtn');
        const currentIp = document.getElementById('currentIp');
        const resultCard = document.getElementById('resultCard');
        const resultIp = document.getElementById('resultIp');
        const locationMap = document.getElementById('locationMap');
        const resultCountry = document.getElementById('resultCountry');
        const resultProvince = document.getElementById('resultProvince');
        const resultCity = document.getElementById('resultCity');
        const resultIsp = document.getElementById('resultIsp');
        const resultLong = document.getElementById('resultLong');
        const resultLat = document.getElementById('resultLat');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const queryHistory = document.getElementById('queryHistory');
        const toast = document.getElementById('toast');
        
        // IP数据库（模拟）
        const ipDatabase = {
            '8.8.8.8': {
                country: '美国',
                province: '加利福尼亚州',
                city: '山景城',
                isp: 'Google LLC',
                longitude: '-122.0785',
                latitude: '37.3860',
                location: '美国 加利福尼亚州 山景城'
            },
            '114.114.114.114': {
                country: '中国',
                province: '江苏省',
                city: '南京市',
                isp: '南京信风网络科技有限公司',
                longitude: '118.7778',
                latitude: '32.0617',
                location: '中国 江苏省 南京市'
            },
            '1.1.1.1': {
                country: '澳大利亚',
                province: '维多利亚州',
                city: '墨尔本',
                isp: 'Cloudflare, Inc.',
                longitude: '144.9631',
                latitude: '-37.8136',
                location: '澳大利亚 墨尔本'
            },
            '223.5.5.5': {
                country: '中国',
                province: '浙江省',
                city: '杭州市',
                isp: '阿里云',
                longitude: '120.1614',
                latitude: '30.1936',
                location: '中国 浙江省 杭州市'
            },
            '192.168.1.5': {
                country: '本地网络',
                province: '内网',
                city: '私有地址',
                isp: '局域网',
                longitude: '116.4074',
                latitude: '39.9042',
                location: '本地网络 私有地址'
            }
        };
        
        // 随机IP生成函数
        function generateRandomIp() {
            return Math.floor(Math.random() * 256) + "." + 
                   Math.floor(Math.random() * 256) + "." + 
                   Math.floor(Math.random() * 256) + "." + 
                   Math.floor(Math.random() * 256);
        }
        
        // 随机位置生成函数
        function generateRandomLocation() {
            const cities = [
                {country: '中国', province: '北京市', city: '北京市', isp: '中国电信', longitude: '116.4074', latitude: '39.9042'},
                {country: '中国', province: '上海市', city: '上海市', isp: '中国移动', longitude: '121.4737', latitude: '31.2304'},
                {country: '中国', province: '广东省', city: '深圳市', isp: '中国联通', longitude: '114.0579', latitude: '22.5431'},
                {country: '中国', province: '四川省', city: '成都市', isp: '中国电信', longitude: '104.0668', latitude: '30.5728'},
                {country: '美国', province: '加利福尼亚州', city: '洛杉矶', isp: 'AT&T', longitude: '-118.2437', latitude: '34.0522'},
                {country: '日本', province: '东京都', city: '东京', isp: 'NTT', longitude: '139.6917', latitude: '35.6895'},
                {country: '英国', province: '英格兰', city: '伦敦', isp: 'British Telecom', longitude: '-0.1278', latitude: '51.5074'},
                {country: '德国', province: '柏林州', city: '柏林', isp: 'Deutsche Telekom', longitude: '13.4050', latitude: '52.5200'}
            ];
            
            return cities[Math.floor(Math.random() * cities.length)];
        }
        
        // 显示提示信息
        function showToast(message, duration = 2000) {
            toast.textContent = message;
            toast.style.display = 'block';
            
            setTimeout(() => {
                toast.style.display = 'none';
            }, duration);
        }
        
        // 检查IP地址格式是否有效
        function isValidIp(ip) {
            const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            return regex.test(ip);
        }
        
        // 查询IP信息
        function queryIpInfo(ip) {
            // 显示加载中动画
            loadingOverlay.style.display = 'flex';
            
            // 模拟网络请求延迟
            setTimeout(() => {
                // 隐藏加载中动画
                loadingOverlay.style.display = 'none';
                
                let ipInfo;
                
                // 检查是否在已知数据库中
                if (ip in ipDatabase) {
                    ipInfo = ipDatabase[ip];
                } else {
                    // 生成随机位置信息
                    ipInfo = generateRandomLocation();
                    // 保存到数据库中以便后续查询
                    ipDatabase[ip] = ipInfo;
                    ipInfo.location = `${ipInfo.country} ${ipInfo.province} ${ipInfo.city}`;
                }
                
                // 更新结果卡片内容
                resultIp.textContent = ip;
                resultCountry.textContent = ipInfo.country;
                resultProvince.textContent = ipInfo.province;
                resultCity.textContent = ipInfo.city;
                resultIsp.textContent = ipInfo.isp;
                resultLong.textContent = ipInfo.longitude;
                resultLat.textContent = ipInfo.latitude;
                
                // 更新地图图片
                locationMap.src = `https://api.map.baidu.com/staticimage?center=${ipInfo.longitude},${ipInfo.latitude}&width=400&height=200&zoom=12&markers=${ipInfo.longitude},${ipInfo.latitude}`;
                
                // 显示结果卡片
                resultCard.style.display = 'block';
                
                // 添加到查询历史
                addToHistory(ip, ipInfo.location);
                
                // 滚动到结果卡片
                resultCard.scrollIntoView({ behavior: 'smooth' });
            }, 1500);
        }
        
        // 添加到查询历史
        function addToHistory(ip, location) {
            // 检查是否已存在相同IP的历史记录
            const existingItem = document.querySelector(`.history-item[data-ip="${ip}"]`);
            if (existingItem) {
                // 如果存在，从列表中移除
                queryHistory.removeChild(existingItem);
            }
            
            // 获取当前时间
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
            const timeString = `今天 ${hours}:${formattedMinutes}`;
            
            // 创建新的历史记录项
            const newHistoryItem = document.createElement('li');
            newHistoryItem.className = 'history-item';
            newHistoryItem.setAttribute('data-ip', ip);
            newHistoryItem.innerHTML = `
                <div class="history-icon">
                    <i class="material-icons">public</i>
                </div>
                <div class="history-details">
                    <div class="history-ip">${ip}</div>
                    <div class="history-location">${location}</div>
                </div>
                <div class="history-time">${timeString}</div>
            `;
            
            // 添加点击事件
            newHistoryItem.addEventListener('click', function() {
                ipInput.value = ip;
                queryIpInfo(ip);
            });
            
            // 插入到历史记录列表顶部
            queryHistory.insertBefore(newHistoryItem, queryHistory.firstChild);
            
            // 如果历史记录超过5条，移除最后一条
            if (queryHistory.children.length > 5) {
                queryHistory.removeChild(queryHistory.lastChild);
            }
            
            // 更新历史记录数量
            document.querySelector('.history-count').textContent = `${queryHistory.children.length}条记录`;
        }
        
        // 为查询按钮添加点击事件
        queryBtn.addEventListener('click', function() {
            const ip = ipInput.value.trim();
            
            if (!ip) {
                showToast('请输入IP地址');
                return;
            }
            
            if (!isValidIp(ip)) {
                showToast('请输入有效的IP地址');
                return;
            }
            
            queryIpInfo(ip);
        });
        
        // 为当前IP添加点击事件
        currentIp.addEventListener('click', function() {
            ipInput.value = this.textContent;
            queryIpInfo(this.textContent);
        });
        
        // 为已有的历史记录项添加点击事件
        document.querySelectorAll('.history-item').forEach(item => {
            item.addEventListener('click', function() {
                const ip = this.getAttribute('data-ip');
                ipInput.value = ip;
                queryIpInfo(ip);
            });
        });
        
        // 底部导航栏切换
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有活动状态
                navItems.forEach(ni => ni.classList.remove('nav-active'));
                // 添加当前活动状态
                this.classList.add('nav-active');
                
                // 获取点击的导航项类型
                const navType = this.querySelector('.nav-label').textContent;
                
                // 如果点击的不是当前页面，跳转到相应页面
                if (navType !== 'IP查询') {
                    const toast = document.createElement('div');
                    toast.style.position = 'fixed';
                    toast.style.bottom = '70px';
                    toast.style.left = '50%';
                    toast.style.transform = 'translateX(-50%)';
                    toast.style.background = 'rgba(0,0,0,0.7)';
                    toast.style.color = 'white';
                    toast.style.padding = '12px 20px';
                    toast.style.borderRadius = '8px';
                    toast.style.zIndex = '1000';
                    toast.style.fontSize = '15px';
                    toast.textContent = `正在加载${navType}页面...`;
                    document.body.appendChild(toast);
                    
                    // 根据点击的导航项确定跳转页面
                    let targetPage = '';
                    if (navType === '首页') {
                        targetPage = 'index.html';
                    } else if (navType === '测速') {
                        targetPage = 'speed_test.html';
                    }
                    
                    // 500毫秒后跳转，给提示显示的时间
                    setTimeout(() => {
                        window.location.href = targetPage;
                    }, 500);
                }
            });
        });
        
        // 更新时间
        function updateTime() {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            document.querySelector('.time').textContent = `${hours}:${minutes}`;
        }
        
        // 初始更新时间
        updateTime();
        
        // 每分钟更新一次时间
        setInterval(updateTime, 60000);
    </script>
</body>
</html> 